<template>
  <div class="contain">
    <div class="contain-header">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>数据统计</el-breadcrumb-item>
        <el-breadcrumb-item>问诊数量统计</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="contain-body">
      <div class="box-nav">
        <div class="body-table">
          <el-table
              @row-click="choose"
              :data="tableData"
              highlight-current-row
              style="width: 100%">
            <el-table-column
                prop="time"
                label="日期"
                align="center"
            >
            </el-table-column>
            <el-table-column
                prop="totalOrderNum"
                label="总问诊数量"
                align="center"
            >
            </el-table-column>
            <el-table-column
                prop="totalConsultationFee"
                label="总挂号费"
                align="center"
            >
            </el-table-column>

          </el-table>
        </div>
        <div class="body-page">
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="page.pageIndex"
              :page-sizes="[10, 15, 20, 25]"
              :page-size="page.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
          </el-pagination>
        </div>
      </div>
      <div class="box-nav">
        <!--				<div class="nav-title">问诊数量明细</div>-->
        <div class="body-table">
          <el-table
              :data="tableData2"
              style="width: 100%">
            <el-table-column
                prop="realName"
                label="医生姓名"
                align="center"
            >
            </el-table-column>
            <el-table-column
                prop="currentDayTotalNum"
                label="当日总订单"
                align="center"
            >
            </el-table-column>
            <el-table-column
                prop="doctorTotalConsultationFee"
                label="当日总挂号费"
                align="center"
            >
            </el-table-column>
          </el-table>
        </div>

        <div class="body-page">
          <el-pagination
              @size-change="handleSizeChange2"
              @current-change="handleCurrentChange2"
              :current-page="page.pageIndex2"
              :page-sizes="[10, 15, 20, 25]"
              :page-size="page.pageSize2"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total2">
          </el-pagination>
        </div>

      </div>

    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      tableData2: [],
      page: {
        pageIndex: 1,
        pageSize: 10,
        pageIndex2: 1,
        pageSize2: 10
      },
      total: 0,
      total2: 0
    }
  },
  created() {
    this.findConsultationInfo()
  },
  methods: {
    choose(row, column, event) {
      this.page.pageIndex2 = 1
      this.tableData2 = row.doctorConsultations
      this.total2 = row.total
    },
    findConsultationInfo() {
      this.axios.post('/admin-data-statistics/findNumberConsultations', this.page).then(res => {
        if (res.data.code === 200) {
          this.tableData = res.data.data.data
          this.total = res.data.data.total
          if (this.tableData) {
            this.tableData2 = this.tableData[0].doctorConsultations
            this.total2 = this.tableData[0].total
          }
        }
      })
    },
    handleSizeChange(val) {
      this.page.pageSize = val
      this.findConsultationInfo()
    },
    handleCurrentChange(val) {
      this.page.pageIndex = val
      this.findConsultationInfo()
    },
    handleSizeChange2(val) {
      this.page.pageSize2 = val
      this.findConsultationInfo()
    },
    handleCurrentChange2(val) {
      this.page.pageIndex2 = val
      this.findConsultationInfo()
    }
  },
}
</script>

<style scoped lang="less">
.contain {
  width: 100%;
  height: 100%;

  .contain-header {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
  }

  .contain-body {
    width: 100%;
    height: calc(100% - 50px);

    display: flex;
    align-items: center;
    justify-content: space-between;

    .box-nav {
      width: 49%;
      height: 100%;
      padding: 1%;
      box-sizing: border-box;
      background-color: #fff;

      .nav-title {
        width: 100%;
        height: 40px;
        line-height: 40px;
        font-size: 18px;
        color: #666;
      }

      .body-table {
        width: 100%;
        height: calc(100% - 70px);
      }

      .body-page {
        width: 100%;
        height: 70px;
        display: flex;
        align-items: center;
      }
    }

  }
}
</style>
